<template>
    <!-- <Person ></Person> -->
    <!-- <div class="nav">
        <RouterLink 
        :to="{ name: 'zhuye' }" 
        active-class="active">
        首页
        </RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink 
        :to="{ path: '/about' }" 
        active-class="active">
            关于
        </RouterLink>
    </div>
    <div class="content">
        <RouterView></RouterView>
    </div> -->

    <!-- <Count/>
    <br/>
    <LoveTalk/> -->

    <!-- <Pasrent></Parent> -->
    <div>
        <h1>MyInput : {{ text }}</h1>
        <MyInput v-model="text" />
        <!-- <MyInput :model-value="text" @update:model-value="text = $event" /> -->

    </div>
</template>

<script setup lang="ts" name="App">
import { ref } from 'vue'
// import Parent from '@/component/Parent.vue';
import MyInput from '@/component/MyInput.vue';

const text = ref('1234ees')

</script>

<style scoped>
.nav {
    width: 800px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    font-weight: bold;

    a {
        color: white;
        text-decoration: none;
        background-color: rgb(153, 145, 145);
        width: 80px;
        text-align: center;
        border-radius: 15px;
        padding: 10px;
    }

    a.active {
        color: rgb(244, 244, 58);
        background-color: cadetblue
    }
}

.content {
    border: 1px solid skyblue;
    width: 800px;
    height: 600px;
    margin: 30px auto;
}
</style>